import React from 'react'
import {Tabs} from 'antd'
import styles from './Planinformation.less'
import  * as actions from '../../../../pages/PlanManagement/PlanList/store/action'
import {connect} from 'react-redux'

const {TabPane} =Tabs
class Index extends React.Component{
    constructor(props){
        super(props)
        this.state={
            current: '0'
        }
    }
    componentDidMount(){
        this.props.getAllPlan()
    }

    changes=(activeKey)=>{
        this.setState({
            current:activeKey
        })
    }
    
    render(){
        const {planlist} =this.props
        let data = []
        if(planlist.length!=0){
            planlist.map((item,key)=>{
                if(item.status){
                    data.push(item)
                }
            })

        }
        return(
            <div className={styles.plan}>
            <Tabs tabPosition='left' style={{ width:'100%' }} activeKey={this.state.current} onChange={this.changes} defaultActiveKey='0'>
                {
                    data.map((item,key)=>{
                        return <TabPane tab={data[key].type} key={key}>
                           <div style={{textAlign:"center"}}>
                                <h3 style={{color:'white'}}>{item.title}</h3>
                           </div>
                           <div dangerouslySetInnerHTML={{__html:item.content}}></div>
                    
                        </TabPane>
                    })
                }
          </Tabs>
          </div>
        )
    }
}
const mapStateToProps=(state)=>({
    planlist: state.getAllPlan.planlist,
})
const mapDispatchToProps=(dispatch)=>({
    getAllPlan() {
        dispatch(actions.getAllPlanRequest())
    },
})
export default connect(mapStateToProps, mapDispatchToProps)(Index)